<template>
  <div class="index">
    <van-nav-bar title="发现" class="topNav" />
    <!-- 面试技巧 -->
    <div class="skill">
      <div class="interviewTop">
        <span class="title">面试技巧</span>
        <div class="more" @click="$router.push('/technicList')">
          <span>查看更多</span>
          <van-icon name="arrow" class="moreIcon" />
        </div>
      </div>
      <technicItem
        v-for="(item, index) in intSkillList"
        :key="index"
        :item="item"
      />
    </div>
    <div class="space"></div>
    <!-- 市场数据 -->
    <div class="maketData">
      <div class="interviewTop">
        <span class="title">市场数据</span>
        <div class="more">
          <span @click="$router.push('/chart')">查看更多</span>
          <van-icon name="arrow" class="moreIcon" />
        </div>
      </div>
      <div class="hotWord">
        <span class="hot">{{ topChartDataList.city }}</span>
        <span class="hot">{{ topChartDataList.position }}</span>
      </div>
      <div class="datas">
        <template v-if="more">
          <div
            class="data"
            v-for="(item, index) in yearSalaryList"
            :key="index"
          >
            <div class="dataTitle">{{ item.year }}</div>
            <van-progress
              :percentage="(item.salary / maxSalary) * 100"
              :pivot-text="`¥${item.salary}`"
              stroke-width="12"
              class="progress"
              color="#fb6e6c"
              track-color="#ebdfdf"
            />
            <i
              v-if="item.percent > 0"
              class="iconfont icon-icon_shangsheng"
            ></i>
            <i v-else class="iconfont icon-icon_xiajiang"></i>
            <div class="num">{{ item.percent }}%</div>
          </div>
        </template>
        <template v-else>
          <div
            class="data"
            v-for="(item, index) in moreYearSalaryList"
            :key="index"
          >
            <div class="dataTitle">{{ item.year }}</div>
            <van-progress
              :percentage="(item.salary / maxSalary) * 100"
              :pivot-text="`¥${item.salary}`"
              stroke-width="12"
              class="progress"
              color="#fb6e6c"
              track-color="#ebdfdf"
            />
            <i
              v-if="item.percent > 0"
              class="iconfont icon-icon_shangsheng"
            ></i>
            <i v-else class="iconfont icon-icon_xiajiang"></i>
            <div class="num">{{ item.percent }}%</div>
          </div>
        </template>
      </div>
      <div class="maketDataBottom" v-if="more">
        <span class="clickMore" ref="clickMore" @click="openMore"
          >展开更多</span
        >
        <i class="iconfont icon-icon_zhankai"></i>
      </div>
      <div v-else class="maketDataBottom">
        <span class="clickMore" ref="clickMore" @click="openLess"
          >收起显示</span
        >
        <i class="iconfont icon-icon_zhankai"></i>
      </div>
    </div>
    <div class="space"></div>
    <!-- 面经分享 -->
    <div class="experience">
      <div class="interviewTop">
        <span class="title">面经分享</span>
        <div class="more">
          <span @click="$router.push('/shareList')">查看更多</span>
          <van-icon name="arrow" class="moreIcon" />
        </div>
      </div>
      <shareItem
        v-for="(item, index) in experienceList"
        :key="index"
        :item="item"
      />
    </div>
  </div>
</template>

<script>
import { articlesTechnic, topChartData, articlesShare } from '@/api/api.js'
import technicItem from '@/views/technicList/technicItem.vue'
import shareItem from '@/views/shareList/shareItem.vue'
export default {
  components: {
    technicItem,
    shareItem
  },
  data () {
    return {
      intSkillList: [],
      topChartDataList: [],
      yearSalaryList: [], // 历年工资
      moreYearSalaryList: [],
      maxSalary: 0, // 进度条比例
      proportion: 0, // 工资升降比例
      more: true,
      experienceList: [] // 面经列表
    }
  },
  methods: {
    // 获取面试技巧文章列表数据
    async getArticlesTechnic () {
      const res = await articlesTechnic({
        limit: 3
      })
      res.data.list = res.data.list.map(v => {
        v.cover = process.env.VUE_APP_URL + v.cover
        return v
      })
      this.intSkillList = res.data.list
      // 面试技巧文章列表
      // console.log(this.intSkillList)
    },
    // 获取市场数据列表数据
    async getTopChartData () {
      const res = await topChartData()
      // console.log(res)
      this.topChartDataList = res.data
      var arr = res.data.yearSalary
      // 7条数据的数组
      this.moreYearSalaryList = arr.reverse()
      // 4条数据的数组 slice方法不会改变原数组
      this.yearSalaryList = this.moreYearSalaryList.slice(0, 4)
      // console.log(this.yearSalaryList)
      var salarys = this.moreYearSalaryList.map(item => {
        return item.salary
      })
      // console.log(salarys)
      // 上下文模式取得最大值
      this.maxSalary = Math.max.apply(null, salarys)
      // console.log(max)
      // console.log(this.maxSalary)
      // console.log(this.yearSalaryList)
      // console.log(this.moreYearSalaryList)
    },
    openMore () {
      // console.log(1)
      // this.$refs.clickMore.innerText = '收起展示'
      // this.yearSalaryList.splice(4, 3)
      // this.more = false
      this.more = false
      // console.log(1)
    },
    openLess () {
      this.more = true
    },
    // 获取面经分享列表数据
    async getArticlesShare () {
      const res = await articlesShare({ limit: 3 })
      // console.log(res)
      res.data.list = res.data.list.map(v => {
        if (v.author.avatar) {
          v.author.avatar = process.env.VUE_APP_URL + v.author.avatar
          return v
        }
      })
      this.experienceList = res.data.list
    }
  },
  created () {
    this.getArticlesTechnic()
    this.getTopChartData()
    this.getArticlesShare()
  }
  // computed: {
  //   yearSalaryList () {
  //     topChartData().then(res => {
  //       if (this.more) {
  //         return res.data.yearSalary.reverse()
  //       }
  //     })
  //   }
  // }
}
</script>

<style lang="less" scoped>
.index {
  .interviewTop {
    display: flex;
    align-items: center;
    padding: 28px 18px;
    .title {
      font-size: 18px;
      font-weight: 700;
      flex: 1;
    }
    .more {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #7b7e90;
      .moreIcon {
        font-size: 18px;
        color: #000;
      }
    }
  }
  .items {
    padding: 0 18px;
    .item {
      display: flex;
      padding-bottom: 28px;
      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .itemTitle {
          font-size: 16px;
        }
        .itemBottom {
          font-size: 12px;
          display: flex;
          color: #ccc;
          .time {
            flex: 1;
          }
          .watch {
            margin-right: 24px;
            display: flex;
            align-items: center;
            .icon-icon_liulanliang {
              padding-right: 5px;
            }
          }
          .zan {
            display: flex;
            align-items: center;
            .icon-icon_dianzanliang {
              padding-right: 5px;
            }
          }
        }
      }
      .right {
        height: 82px;
        margin-left: 16px;
        img {
          width: 114px;
          height: 82px;
        }
      }
    }
  }
  .space {
    height: 12px;
    width: 100%;
    background-color: #f9f9f9;
  }
  .maketData {
    padding: 0 18px;
    .hotWord {
      .hot {
        padding: 8px;
        font-size: 14px;
        background: #eceaeb;
        border-radius: 5px;
        margin-right: 10px;
      }
    }
    .datas {
      margin-top: 28px;
      .data {
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        .dataTitle {
          font-size: 14px;
          padding-right: 8px;
          // flex: 4;
        }
        .progress {
          flex: 1;
          /deep/ .van-progress__pivot {
            line-height: 1;
          }
        }
        .icon-icon_shangsheng {
          padding: 0 16px;
          color: #21d37d;
          // flex: 2;
        }
        .icon-icon_xiajiang {
          padding: 0 16px;
          color: #fc6e6b;
          // flex: 2;
        }
        .num {
          font-size: 14px;
          // flex: 1;
        }
      }
    }
    .maketDataBottom {
      width: 100%;
      display: flex;
      align-items: center;
      // text-align: center;
      justify-content: center;
      line-height: 30px;
      .clickMore {
        font-size: 14px;
        padding-right: 5px;
      }
      .icon-icon_zhankai {
        font-size: 14px;
        color: #ccc;
      }
    }
  }
  .experience {
    .expItems {
      padding: 16px 18px 28px 18px;
      .expTitle {
        font-size: 16px;
      }
      .expContent {
        font-size: 14px;
        padding-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .expBottom {
        padding-top: 20px;
        font-size: 10px;
        display: flex;
        align-items: center;
        color: #ccc;
        img {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          margin-right: 10px;
        }
        .expName {
          font-size: 10px;
          flex: 1;
        }
        .expTime {
          padding-right: 20px;
        }
        .expComment {
          display: flex;
          align-items: center;
          margin-right: 20px;
          .icon-icon_pinglun {
            padding-right: 8px;
          }
        }
        .expZan {
          display: flex;
          align-items: center;
          .icon-icon_dianzanliang {
            padding-right: 8px;
          }
        }
      }
    }
  }
}
</style>
